<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>course</title>
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta name="viewport" content="width=1080, minimum-scale=0.3, target-densitydpi=device-dpi,user-scalable=no,">	
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <link rel="stylesheet" type="text/css" href="css/all.css"/>
</head>
	<body>
		<header class="app-bar">			
			<h1 class="title">Beginner Conversational</h1>
			<p class="fr" onclick="$('.app-cue').toggle('')"><i class=" icon-sangedian1 iconfont"></i><span class="more">More</span><span class=" i"></span></p>
			<div class="app-cue">
				<p><img src="img/BCC icon white.svg"/>Beginner Conversational</p>
				<p><img src="img/CCC icon white.svg"/>Chinese Character</p>
				<p><img src="img/ICC icon white.svg"/>Intermediate Conversational</p>
			</div>
		</header>	
		
		<!------------------标头结束--------------------->
		
		<div class="app-course-schedule">
			<ul class="clearfix">
				<li><span><i class="left"></i></span><p>Lv.1</p></li>
				<li><span></span><p>Lv.2</p></li>
				<li><span></span><p>Lv.3</p></li>
				<li><span></span><p>Lv.4</p></li>
				<li><span></span><p>Lv.5</p></li>
				<li><span></span><p>Lv.6</p></li>
			</ul>
		</div>
		<!------------------进度条结束--------------------->
		<div class="app-course-list clearfix">
			<ul>
				<li class="change">
					<div class="course-list-img"><img src="img/Pinyin icon.png"/></div>
					<h1>Unit 11</h1>
					<p class="contentxt">What do you usually do on weekends?</p>
					<p class="rate"><span></span></p>
				</li>
				<li>
					<div class="course-list-img"><img src="img/09.png"/></div>
					<h1>Unit 11</h1>
					<p class="contentxt">What do you usually do on weekends?</p>
					<p class="rate"></p>
				</li>
				<li>
					<div class="course-list-img"><img src="img/Pinyin icon.png"/></div>
					<h1>Unit 11</h1>
					<p class="contentxt">What do you usually do on weekends?</p>
					<p class="rate"></p>
				</li>
				<li>
					<div class="course-list-img"><img src="img/07.png"/></div>
					<h1>Unit 11</h1>
					<p class="contentxt">What do you usually do on weekends?</p>
					<p class="rate"></p>
				</li>
				<li>
					<div class="course-list-img"><img src="img/02.png"/></div>
					<h1>Unit 11</h1>
					<p class="contentxt">What do you usually do on weekends?</p>
					<p class="rate"></p>
				</li>
				<li>
					<div class="course-list-img"><img src="img/01.png"/></div>
					<h1>Unit 11</h1>
					<p class="contentxt">What do you usually do on weekends?</p>
					<p class="rate"></p>
				</li>
				<li>
					<div class="course-list-img"><img src="img/11.png"/></div>
					<h1>Unit 11</h1>
					<p class="contentxt">What do you usually do on weekends?</p>
					<p class="rate"></p>
				</li>
				<li>
					<div class="course-list-img"><img src="img/08.png"/></div>
					<h1>Unit 11</h1>
					<p class="contentxt">What do you usually do on weekends?</p>
					<p class="rate"></p>
				</li>
				<li>
					<div class="course-list-img"><img src="img/siblings icon.png"/></div>
					<h1>Unit 11</h1>
					<p class="contentxt">What do you usually do on weekends?</p>
					<p class="rate"></p>
				</li>	
				<li>
					<div class="course-list-img"><img src="img/siblings icon.png"/></div>
					<h1>Unit 11</h1>
					<p class="contentxt">What do you usually do on weekends?</p>
					<p class="rate"></p>
				</li>					
			</ul>
		</div>
		
		<div class="app-course-aspect">
			<img src="img/arrow left.svg"/>		
			<p>Level 2 Test</p>
			<img src="img/arrow right.svg"/>	
		</div>
		<!------------------列表内容--------------------->		
		<div class="app-foot">
			<a class="tab-item">
				<img src="img/Home icon.svg" class="tab-item-img"/>
				<span class="tab-item-name">Home</span>			
			</a>	
			<a class="tab-item">
				<img src="img/Course icon active.svg" class="tab-item-img"/>
				<span class="tab-item-name change">Courses</span>
				<span class="tab-item-cricle"></span>
			</a>	
			<a class="tab-item">
				<img src="img/Review icon.svg" class="tab-item-img"/>
				<span class="tab-item-name">Review</span>
			</a>	
			<a class="tab-item">
				<img src="img/Resources icon.svg" class="tab-item-img"/>
				<span class="tab-item-name">Resources</span>
			</a>	
			<a class="tab-item">
				<img src="img/Me icon.svg" class="tab-item-img"/>
				<span class="tab-item-name">Me</span>
			</a>			
		</div>		
		
	</body>
	<script src="js/jquery-2.1.0.js"></script>
	<script>
		$(document).ready(function(){
			$('.course-list-img').click(function(){
				location.href="lesson.html"
			})

		})
	</script>
</html>
